<template>
  <view class="price" :style="{ color: color }">
    <view class="legal" :style="{ fontSize: legalSize }">$</view>
    <view class="integer" :style="{ fontSize: integerSize, fontWeight: weight }">
      {{ integerPart }}
    </view>
    <view class="decimal" :style="{ fontSize: decimalSize }">{{ decimalPart }}</view>
  </view>
</template>

<script setup>
import { defineProps, computed } from 'vue'

const props = defineProps({
  price: {
    type: Number,
    required: true,
  },
  integerSize: {
    type: String,
    default: '24rpx',
  },
  legalSize: {
    type: String,
    default: '24rpx',
  },
  decimalSize: {
    type: String,
    default: '24rpx',
  },
  color: {
    type: String,
    default: '#FF0F0A',
  },
  weight: {
    type: String,
    default: '600',
  },
})

const integerPart = computed(() => {
  return Math.floor(props.price)
})

const decimalPart = computed(() => {
  const decimal = props.price.toString().split('.')[1]
  return decimal ? `.${decimal}` : '.00'
})
</script>

<style lang="scss" scoped>
.price {
  display: flex;
  align-items: baseline;
}
.legal {
  font-family: initial;
}

.decimal {
  font-size: 18rpx;
}
</style>
